<nav class="navbar navbar-fixed-top {% if page.navbar_gray %}navbar-gray{%endif%} {% if page.navbar_white %}navbar-white{%endif%} {% if page.navbar_jupytercon %}jupytercon-navbar{% endif %}" role="navigation" id="navbar" >
        <div class="navbar-inner">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    {% if page.url == '/' or page.url == '/index.html' %}
                      <span class="icon-bar white-icon-bar"></span>
                      <span class="icon-bar white-icon-bar"></span>
                      <span class="icon-bar white-icon-bar"></span>
                    {% else %}
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    {% endif %}
                </button>
                <a class="navbar-brand" href="{{site.baseurl}}/index.html">
                    <img id="jupyter-nav-logo" class="navbar-logo" src="{% if page.url == '/' or page.url == '/index.html' %}{{site.baseurl}}/assets/white_nav_logo.svg{% else %}{{site.baseurl}}/assets/nav_logo.svg{%endif%}" alt="Jupyter logo">
                </a>
            </div>
            <div class="blur"></div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right {% if page.url == '/' | page.url == '/index.html' %}jupytercon-nav{% endif %}">
                    {% for nav in site.data.nav.head %}
                      {% if nav.url %}
                           <li>
                             <a href="{{site.baseurl}}{{nav.url}}" class="tab" target="_blank">{{nav.title}}</a>
                           </li>
                      {% else %}
                        {% for targetpage in site.pages %}
                           {% if nav contains targetpage.title%}
                              {% if page.title == targetpage.title %}
                               <li>
                                   <a href  class="tab navbar-active">{{targetpage.title}}</a>
                               </li>
                               {% else %}
                               <li>
                                   <a href="{{site.baseurl}}{{targetpage.url}}" class="tab">{{targetpage.title}}</a>
                               </li>
                               {% endif %}
                           {% endif %}
                           {% endfor %}
                      {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </div>
</nav>
